<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/lightgallery/css/lightgallery-bundle.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
            图库列表
        </div>
        <div class="card-body">
            <div class="bsa-gallery-grid">
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/123.png"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/123.png">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery2_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery2.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery3_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery3.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery4_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery4.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery5_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery5.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery6_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery6.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery7_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery7.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery8_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery8.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery9_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery9.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery10_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery10.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery11_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery11.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery12_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery12.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery13_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery13.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery14_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery14.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery15_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery15.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery16_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery16.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery17_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery17.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery18_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery18.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery19_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery19.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery20_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery20.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery21_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery21.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery22_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery22.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="bsa-gallery-item">
                    <div class="card border-0 shadow-sm">
                        <img src="../dist/img/gallery23_thumb.avif"
                             class="card-img-top bsa-cursor-pointer" alt="..." data-src="../dist/img/gallery23.avif">
                        <div class="card-body">
                            <h5 class="card-title">图片标题</h5>
                            <p class="card-text">图片描述</p>
                            <a href="javascript:" class="btn btn-danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <div class="card-footer bg-body">

            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->


<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>

<script src="../lib/lightgallery/lightgallery.min.js"></script>
<script src="../lib/lightgallery/plugins/zoom/lg-zoom.min.js"></script>
<script src="../lib/lightgallery/plugins/thumbnail/lg-thumbnail.min.js"></script>

<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>

    $(function () {
        lightGallery(document.querySelector('.bsa-gallery-grid'), {
            speed: 500,
            selector: '.card-img-top',
            mode: 'lg-slide',
            // ... 其它设置
        });
    })


</script>
</body>
</html>